<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-12 row align-items-center">
        <div class="col-6 col-md-4 row py-2">
            <div class="col-12 row py-2 justify-content-center">
                <a class="col-4 btn" [routerLink]="['/card-value-setting/']" [queryParams]="{id: _id}">
                    <img class="img-fluid" src="assets/images/btn_edit.png">
                </a>
                <a *ngIf="hasUserData" class="col-4 btn" routerLink="/card-calculator" (click)="deleteUserData()">
                    <img class="img-fluid" src="assets/images/btn_delete.png">
                </a>
            </div>
        </div>
        <h4 class="col col-md-4 my-3 text-center">{{'KEYWORD.' + card.character | translate}} - {{card.n}}</h4>
    </div>
    
    <div class="col-5 col-md-6 row justify-content-around">
        <div class="col-12 col-sm-11 col-md-7 col-lg-5 mb-1">
            <div class="bg-dark text-center py-2">
                <img class="img-fluid icon" src="{{'assets/images/' + card.type + '.png'}}">
                <span style="font-size: 1.1em; padding-left: 1em;">{{power}}</span>
            </div>
            <img class="img-fluid" src="{{imgURL + card.character + '/' + card.ref + '-full.webp'}}">
        </div> 
    </div>

    <div class="col-7 col-md-6 row justify-content-around text-center">
        <table class="col-12 col-lg-4 col-lg-5 table table-sm table-dark text-center" id="card-info">
            <tr>
                <th>{{'KEYWORD.RARITY' | translate}}</th>
                <td>{{card.rarity}}</td>
            </tr>
            <tr>
                <th>
                    {{'KEYWORD.LEVEL' | translate}}
                </th>
                <td>
                    {{lv}}
                </td>
            </tr>
            <tr>
                <th>
                    {{'KEYWORD.BASE-INFLUENCE' | translate}}
                </th>
                <td>
                    {{att}}
                </td>
            </tr>
            <tr>
                <th>
                    {{'KEYWORD.BASE-DEFENSE' | translate}}
                </th>
                <td>
                    {{def}}
                </td>
            </tr>
            <tr>
                <th>
                    {{'KEYWORD.RANK' | translate}}
                </th>
                <td>
                    {{star}}
                </td>
            </tr>
        </table>
        <table class="col-12 col-lg-6 table table-sm table-dark text-center gridItem" id="skill-info">
            <thead>
                <tr>
                    <th colspan="3">
                        {{'KEYWORD.SKILL' | translate}}
                    </th>
                </tr>
            </thead>
            <!-- <tbody *ngFor="let s of card.skills"> -->
            <tbody *ngFor="let s of card.skillObj">
                <tr>
                    <td rowspan="2">
                        <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                            <img class="icon"
                                src="{{imgURL + '技能/' + s.ref + '.webp'}}">
                        </a>
                    </td>
                    <td colspan="2">
                        <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                            {{s.n}}
                        </a>
                    </td>

                    <td rowspan="2">
                        <!-- {{skills[card.skills.indexOf(s)]}} -->
                        {{skills[card.skillObj.indexOf(s)]}}
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span class="smallFont">
                            <!-- {{skillsInfo[card.skills.indexOf(s)]}} -->
                            {{skillsInfo[card.skillObj.indexOf(s)]}}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>
</div>